<template>
<div class="pad20">
    <div class=" clearfix left10">
        <span>
            <span>年份</span>
            <el-select class="left10" v-model="value1" placeholder="请选择">
                <el-option v-for="item in [
                    {value: '2018'},
                    {value: '2019'},
                    {value: '2020'},
                ]" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
            </el-select>
        </span>
        <span class="left20">
            <span>地区</span>
            <el-select class="left10" v-model="value2" placeholder="请选择">
                <el-option v-for="item in [
                    {value: '全市'},
                ]" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
            </el-select>
        </span>
        <el-button type="primary" class="left20">搜索</el-button>
    </div>
    <el-row class="top20">
        <el-col :span="8" v-for="(item, index) in cardList" :key="index">
            <div class="mcard1">
                <div class="t" :style="{backgroundColor: item.color}">{{item.name}}</div>
                <div class="c relative" :style="{color: item.color}">
                    {{item.num}}<span class="font20">万</span>
                    <span v-if="index == 1" class="absolute" style="right: 20px; bottom: 0;"> <i class="icoAll ico9"></i><span class="font20 left5 colred">预警</span></span>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row class="top20">
        <el-col :span="7">
            <div class="pad10">
                <div class="borderRad pad20">
                    <Chart1 />
                </div>
            </div>
        </el-col>
        <el-col :span="10">
            <div class="pad10">
                <div class="borderRad pad20">
                    <Chart2 />
                </div>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="pad10">
                <div class="borderRad pad20">
                    <Chart3 />
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row class="top20">
        <el-col :span="12">
            <div class="pad10">
                <div class="borderRad pad20">
                    <Chart4 />
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="pad10">
                <div class="borderRad pad20">
                    <Chart5 />
                </div>
            </div>
        </el-col>
        
    </el-row>
</div>
</template>

<script>
import Chart1 from './chart/Chart1'
import Chart2 from './chart/Chart2'
import Chart3 from './chart/Chart3'
import Chart4 from './chart/Chart4'
import Chart5 from './chart/Chart5'
export default {
    components: {
        Chart1,
        Chart2,
        Chart3,
        Chart4,
        Chart5,
    },
    data() {
        return {
            value1: '',
            value2: '',
            phbList: [
                {name: '集中就餐', value: '14567676', a: require('../../../assets/ico6.png')},
                {name: '上门送餐', value: '654554',a: require('../../../assets/ico6.png')},
                {name: '室内除尘、清洁', value: '56553', a: ''},
                {name: '玻璃清洁', value: '4545',a: require('../../../assets/ico7.png')},
                {name: '衣物清洗', value: '4344', a: require('../../../assets/ico8.png')},
                {name: '玻璃清洗', value: '3522', a: ''},
                {name: '协助更衣及指导', value: '3111', a: ''},
                {name: '温水擦浴', value: '2356', a: ''},
                {name: '失禁护理', value: '2222', a: ''},
                {name: '日间照料', value: '1111', a: ''},
            ],
            cardList: [{
                    name: '年度预算总额',
                    num: '1920',
                    color: '#6395FF'
                },
                {
                    name: '已使用年度预算',
                    num: '1500',
                    color: '#FFAE38'
                },
                {
                    name: '预算余额',
                    num: '420',
                    color: '#FF5D52'
                }
            ]
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {}
};
</script>

<style scoped>

</style>
